<template>
  <div class="wrap">
    <ul v-for="(item,i) in new_list" :key="i">
      <li> <i v-if="item.children&&item.children.length" class="el-icon-arrow-right"></i> 
      <span @click="item.show=!item.show">{{item.name}}</span>
      </li>
       <el-collapse-transition>
      <tree v-show="item.show" v-if="item.children&&item.children.length" :tree="item.children"></tree>
       </el-collapse-transition>
    </ul>
  </div>
</template>

<script>
export default {
  name:"tree",
  data(){
    return{
      new_list: this.tree.map(v=>{
        return {
          name: v.name,
          people: v.people,
          children: v.children,
          show: false
        }
      })
    }
  },
  props:['tree'],
  components:{
  }
}
</script>

<style lang="less" scoped>

ul{
  list-style: none;
}
</style>